<template>
	<view class="container">
		<view class="header">
			<u-image :src="data.bg_url" width="100%" height="300" mode="aspectFill"></u-image>
		</view>
		
		<view class="body">
			<view class="title">
				<text>{{data.title}}</text>
			</view>
			
			<view class="downBox">
				<view class="status">{{data.status}}</view>
				<view class="udown">
					<u-count-down 
						:timestamp="data.timestamp" 
						:autoplay="false" 
						separator="zh" 
						color="#f96770" 
						bg-color="#f5f5f5" 
						font-size="40" 
						separator-color="#909399"
					></u-count-down>
				</view>
			</view>
			
			<view class="enrollBox" @click="toUserEnroll()">
				<view class="enroll-btn">
					我要报名
				</view>
			</view>
			
			<view class="numberBox">
				<view>
					<view class="number">{{numberConvert(data.number_count)}}</view>
					<view class="numberText">已报名</view>
				</view>
				<view>
					<view class="number">{{numberConvert(data.vote_count)}}</view>
					<view class="numberText">累计投票</view>
				</view>
				<view>
					<view class="number">{{numberConvert(data.hits_count)}}</view>
					<view class="numberText">访问量</view>
				</view>
			</view>
			
			<view class="searchBox">
				<u-search 
					border-color="#f96770"
					bg-color="#fff"
					placeholder="请输入编号或名称" 
					v-model="keyword"
					height="70"
					:action-style="searchActionStyle"
				></u-search>
			</view>
			
			<view class="orderBox">
				<view :class="[ orderType == 'new' ? 'thisOrder' : '' ]"  @click="chageOrderType('new')">最新</view>
				<view :class="[ orderType == 'hits' ? 'thisOrder' : '' ]" @click="chageOrderType('hits')">热门</view>
			</view>
			
			<view class="list">
				<view v-if="list.length > 0">
					<u-waterfall v-model="list" ref="uWaterfall">
						<template v-slot:left="{leftList}">
							<view class="warter left-warter" v-for="(item, index) in leftList" :key="index" @click="toUserVote(item)">
								
								<u-lazy-load threshold="100" border-radius="10" :image="item.user_url[0]['url']" :index="index"></u-lazy-load>
								
								<view class="list-id">
									{{item.id}}
								</view>
								
								<view class="list-bottom">
									<view class="list-name">
										{{item.user_name}}
									</view>
									<view class="list-vote">
										{{item.vote_count}}票
									</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="warter right-warter" v-for="(item, index) in rightList" :key="index" @click="toUserVote(item)">
								<u-lazy-load threshold="100" border-radius="10" :image="item.user_url[0]['url']" :index="index"></u-lazy-load>
								<view class="list-id">
									{{item.id}}
								</view>
								
								<view class="list-bottom">
									<view class="list-name">
										{{item.user_name}}
									</view>
									<view class="list-vote">
										{{item.vote_count}}票
									</view>
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
				
				<view v-else>
					<u-empty text="还没有选手" mode="data"></u-empty>
				</view>
			</view>
		</view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="btn-left" @click="toExplain()">
				<u-icon name="question-circle" size="32"></u-icon>
				<text style="padding-left: 10rpx;">活动说明</text>
			</view>
			<view class="btn-right" @click="toLeaderboard(data.id)">
				<u-icon name="star" size="32"></u-icon>
				<text style="padding-left: 10rpx;">查看排行榜</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				data: {},
				keyword: '',
				searchActionStyle: {
					border: '1px solid #f96770',
					color: '#f96770',
					width: '130rpx',
					height: '70rpx',
					lineHeight: '64rpx',
					borderRadius: '50px',
					marginLeft: '30rpx',
				},
				
				orderType: 'new',
				list:[],
				flowList: [],
			};
		},
		onLoad(options) {
			this.id = options.id || 0;
			this.getData();
			this.getUserList();
		},
		onReachBottom(){
			console.log('more');
		},
		methods:{
			getData(){
				let data = {
					id: 1,
					title: 'XXX学校校花校草评选',
					number_count: 0,
					vote_count: 0,
					hits_count: 0,
					status: '距离报名开始',
					timestamp: 96400,
					end_time: '2023-05-01 12:00:01',
					bg_url: '/static/image/bg.png'
				}
				
				this.data = data;
				
				uni.setNavigationBarTitle({
					title: data.title
				})
			},
			getUserList(){
				let list = [];
				let img = [
					'/static/image/user1.jpeg',
					'/static/image/user2.png',
					'/static/image/user3.png',
					'/static/image/user4.jpeg',
				]
				
				for(var i=0;i<20;i++){
					let index = this.$u.random(0, img.length - 1);
					
					list.push({
						id: i,
						user_name: '快投我' + i,
						vote_count: 999,
						user_url: [
							{'url': img[index]}
						]
					})
				}
				
				this.list = list;
			},
			numberConvert(number){
				if(number >= 1000000){
					return parseInt(number / 10000) + 'W+';
				}
				
				return number;
			},
			chageOrderType(type){
				this.orderType = type;
			},
			toExplain(){
				let that = this;
				uni.navigateTo({
					url: "/pages/vote/explain",
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', that.data)
					}
				})
			},
			toLeaderboard(id){
				uni.navigateTo({
					url: "/pages/vote/leaderboard?id=" + id,
				})
			},
			toUserVote(data){
				uni.navigateTo({
					url: "/pages/vote/user?id=" + data.id
				})
			},
			toUserEnroll(){
				uni.navigateTo({
					url: "/pages/vote/enroll?id=" + this.data.id,
				})
			}
		},
	}
</script>

<style lang="scss">
	.container{
		.title{
			padding: 50rpx 0 30rpx 0;
			text-align: center;
			color: #f96770;
			font-size: 36rpx;
			font-weight: bold;
		}
		
		.enrollBox{
			display: flex;
			text-align: center;
			align-content: center;
			justify-content: center;
			
			.enroll-btn{
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #fff;
				background-color: #f96770;
				border-radius: 50rpx;
				margin-top: 30rpx;
			}
		}
		
		.downBox{
			background-color: #f5f5f5;
			display: flex;
			text-align: center;
			flex-wrap: wrap;
			align-content: center;
			margin: 0 50rpx;
			border-radius: 15rpx;
			
			view{
				flex-basis: 100%;
			}
			
			.status{
				color: #f96770;
				padding: 20rpx 0;
				letter-spacing: 4rpx;
				font-weight: 500;
			}
			.udown{
				padding: 10rpx 0 20rpx 0;
			}
		}
		
		.numberBox, .orderBox{
			display: flex;
			justify-content: center;
			padding: 50rpx;
			align-content: center;
			text-align: center;
			
			view{
				flex: 1;
			}
			
			.number{
				color: #f96770;
				font-size: 50rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
			}
			
			.numberText{
				color: #909399;
			}
		}
		
		.searchBox{
			padding: 10rpx 50rpx;
		}
		
		.orderBox{
			padding: 30rpx;
			font-size: 30rpx;
			
			.thisOrder{
				font-size: 34rpx;
				color: #f96770;
			}
		}
		
		.list{
			
			.warter{
				border-radius: 16rpx;
				background-color: #ffffff;
				position: relative;
				
				.list-id{
					position: absolute;
					top: 20rpx;
					right: 10rpx;
					background: rgba(143, 143, 143, 0.4);
					border-radius: 0 16rpx 0 40px;
					color: #fff;
					min-width: 60rpx;
					text-align: center;
					padding: 4rpx;
				}
				
				.list-bottom{
					position: absolute;
					color: #fff;
					bottom: 20rpx;
					left: 20rpx;
					right: 10rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					padding: 10rpx 20rpx;
					
					border-radius:0 0 16rpx 16rpx;
					background: linear-gradient(to bottom, rgba(0,0,0,0.01), rgba(0,0,0,0.3));
				}
				
				.list-name{
					flex-basis: 60%;
					
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
			.left-warter{
				padding: 20rpx 10rpx 20rpx 20rpx;
			}
			.right-warter{
				padding: 20rpx 20rpx 20rpx 10rpx;
				
				.list-id{
					right: 20rpx;
				}
				.list-bottom{
					left: 10rpx;
					right: 20rpx;
				}
			}
		}
		
		.page-bottom{
			position:fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			
			background-color: #fff;
			border-top: 1px solid #f5f5f5;
			
			.btn-left{
				border: 1px solid #f96770;
				color: #f96770;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				flex: 1;
				margin: 20rpx 20rpx 30rpx 20rpx;
			}
			.btn-right{
				color: #fff;
				background-image: linear-gradient(#f96770, #fc587d);
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				flex: 1;
				margin: 20rpx 20rpx 30rpx 20rpx;
			}
		}
	}
	
	.body{
		padding-bottom: 120rpx;
	}
	
	.udown .u-countdown .u-countdown-colon{
		padding-right: 20rpx;
	}
</style>
